<template>
	<view class="subselldetail">
		<view v-if="status == 1" class="topStatus">
			<image src="../../static/image/status1.png" mode="" style="width: 150rpx;height: 150rpx;"></image>
			<view class="statustext" style="margin-left: 102rpx;">
				<view class="">
					等待买家付款
				</view>
				<view class="" style="margin-top: 15rpx;">
					剩23小时13分自动关闭
				</view>
			</view>
		</view>
		<view v-if="status == 3" class="topStatus">
			<image src="../../static/image/status1.png" mode="" style="width: 150rpx;height: 150rpx;"></image>
			<view class="statustext" style="margin-left: 102rpx;">
				<view class="">
					已完成
				</view>
				<view class="" style="margin-top: 15rpx;">
					待卖家转货
				</view>
			</view>
		</view>
		<view class="dataListitem">
			<view class="bianhao">
				<!-- 订单编号:{{pageData.order_no}} -->
			</view>
			<view class="content">
				<image :src="pageData.image" mode="" style="width: 170rpx; height: 170rpx;border-radius: 10rpx;">
				</image>
				<view class="contentRight">
					<view class="name">
						{{pageData.name}}
					</view>
					<view class="price">
						拍中价格:￥ {{pageData.all_price}}
					</view>
					<view class="maijia">
						<view v-if="status == -1 || status == 0" class="maijiatext">
							卖家
						</view>
						<view v-else class="maijiatext">
							买家
						</view>
						<view v-if="status == -1 || status == 0" class="maijianame">
							{{pageData.nickname}}
						</view>
						<view v-else class="maijianame">
							{{pageData.buy_info.nickname}}
						</view>
					</view>
				</view>
			</view>
			<view class="heng"></view>
			<view class="time">
				下单时间:{{pageData.created_at}}
			</view>
			<view class="itemBottom">
				<view v-if="status == 0" class="itemBottomleft">
					待支付：{{Math.round(pageData.all_price)}}
				</view>
				<view v-else class="itemBottomleft">
					已支付：{{Math.round(pageData.all_price)}}
				</view>
			</view>
		</view>

		<view v-if="status == 2 || status == 3" class="pz">
			<view class="title">
				查看凭证
			</view>
			<view class="uploadBox">
				<image v-if="payment_voucher_imgs !=''" :src="payment_voucher_imgs" mode=""
					style="width: 100%;height: 100%;" @click="handlePreviewImage"></image >
			</view>
		</view>

		<!-- <view v-if="status == 3" class="addressBox">
			<view class="title">
				收件人信息
			</view>
			<view class="addressmessage">
				<view class="item">
					<text class="left">
						姓名:
					</text>
					<text class="right">
						张三三
					</text>
				</view>
				<view class="heng"></view>
				<view class="item">
					<text class="left">
						电话:
					</text>
					<text class="right">
						18458623651
					</text>
				</view>
				<view class="heng"></view>
				<view class="item">
					<text class="left">
						详细地址:浙江省杭州市西湖区文三路138号东方通信大厦7楼501室
					</text>

				</view>
			</view>
		</view> -->

		<view v-if="status == 1 || status == 2" class="bottomContent">
			<view class="btnbox">
				<view class="btn btns" @click="handlesubmitorderfinish">
					确认已支付
				</view>
			</view>
		</view>


		<view class="" style="height: 100rpx;"></view>


	</view>
</template>

<script>
	import {
		sellorderdetail,
		submitorderfinish
	} from "@/api/api.js"
	export default {
		data() {
			return {
				status: null,
				pageId: null,
				payment_voucher_imgs: "",
				pageData: {
					nickname:""
				}
			}
		},
		onLoad(options) {
			if (!uni.getStorageSync("token")) {
				uni.reLaunch({
					url: "../login/index"
				})
				return
			}
			this.pageId = options.id
			this.handleGetorderdetail()
			this.token = uni.getStorageSync("token")
		},
		methods: {
			//图片放大
			handlePreviewImage() {
				console.log("111")
				uni.previewImage({
					current: 0,
					urls: [this.payment_voucher_imgs] //必须是网址路径，否则加载不出来，如：http：或https：
				});
			},

			async handleGetorderdetail() {
				let res = await sellorderdetail({
					id: this.pageId
				})
				console.log("订单详情", res)
				this.pageData = res.data
				this.status = res.data.status
				this.payment_voucher_imgs = res.data.payment_voucher_imgs
			},
			handleUpload() {
				let that = this
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], //从相册选择
					success: (chooseImageRes) => {
						const tempFilePaths = chooseImageRes.tempFilePaths;
						console.log("tempFilePaths", tempFilePaths)
						uni.uploadFile({
							url: 'http://admin.jinsekeji.com.cn/api/login/upload', //仅为示例，非真实的接口地址
							filePath: tempFilePaths[0],
							name: 'file',
							header: {
								// "Content-Type": "application/form-data",
								"Authorization": 'Bearer' + that.token
							},
							success: (uploadFileRes) => {
								// console.log("33333", uploadFileRes)
								that.payment_voucher_imgs = (JSON.parse(uploadFileRes.data).data)
								console.log("图片", that.payment_voucher_imgs)
							},
							fail(e) {
								console.log("上传图片", e)
							}
						});
					}
				});
			},

			async handlesubmitorderfinish() {
				// if (this.payment_voucher_imgs == "") {
				// 	uni.showToast({
				// 		title: "请先上传付款凭证",
				// 		icon: "none",
				// 		duration: 1500
				// 	});
				// 	return
				// }
				let res = await submitorderfinish({
					id: this.pageId
				})
				if (res.code == 1000) {
					uni.showToast({
						title: res.message,
						icon: "none",
						duration: 1500
					});
					setTimeout(() => {
						this.handleGetorderdetail()
					}, 2000)
				} else {
					uni.showToast({
						title: res.message,
						icon: "none",
						duration: 1500
					});
				}

			},
		}
	}
</script>

<style scoped lang="scss">
	.uploadBox {
		width: 202rpx;
		height: 202rpx;
		background: #F1F1F1;
		border-radius: 6rpx 6rpx 6rpx 6rpx;
		text-align: center;
		line-height: 202rpx;
		margin-top: 16rpx;
	}

	.subselldetail {
		.topStatus {
			width: 100%;
			height: 198rpx;
			background: #FFFFFF;
			padding: 24rpx 0;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			padding-left: 104rpx;

			.statustext {
				font-size: 28rpx;
				font-family: PingFang SC-Bold, PingFang SC;
				font-weight: 400;
				color: #359691;
				line-height: 48rpx;
			}
		}

		.dataListitem {
			width: 100%;
			height: 384rpx;
			background: #FFFFFF;
			border-radius: 10rpx 10rpx 10rpx 10rpx;
			margin-bottom: 30rpx;
			padding: 18rpx 30rpx;
			box-sizing: border-box;
			margin: 0 auto;
			margin-top: 14rpx;

			.bianhao {
				font-size: 28rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 400;
				color: #707070;
				line-height: 28rpx;
			}

			.content {
				display: flex;
				width: 100%;
				margin-top: 20rpx;

				.contentRight {
					height: 170rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					margin-left: 30rpx;

					.name {
						font-size: 28rpx;
						font-family: PingFang SC-Bold, PingFang SC;
						font-weight: 400;
						color: #333333;
						line-height: 28rpx;
					}

					.price {
						font-size: 28rpx;
						font-family: PingFang SC-Medium, PingFang SC;
						font-weight: 400;
						color: #707070;
						line-height: 28rpx;
					}

					.maijia {
						display: flex;
						height: 36rpx;
						border-radius: 0rpx 0rpx 0rpx 0rpx;
						opacity: 1;
						border: 2rpx solid #359691;

						.maijiatext {
							width: 78rpx;
							height: 36rpx;
							background: #359691;
							color: #ffffff;
							font-size: 28rpx;
							font-family: PingFang SC-Medium, PingFang SC;
							font-weight: 400;
							color: #FFFFFF;
							line-height: 36rpx;
							text-align: center;
						}

						.maijianame {
							width: 292rpx;
							font-size: 28rpx;
							font-family: PingFang SC-Medium, PingFang SC;
							font-weight: 400;
							color: #707070;
							line-height: 36rpx;
							text-align: center;
						}
					}
				}
			}

			.heng {
				width: 100%;
				height: 1rpx;
				background-color: #D8D8D8;
				margin-top: 20rpx;
			}

			.time {
				font-size: 28rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 400;
				color: #707070;
				line-height: 28rpx;
				margin-top: 20rpx;
			}

			.itemBottom {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-top: 20rpx;

				.itemBottomleft {
					font-size: 30rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 400;
					color: #333333;
					line-height: 28rpx;
				}

			}
		}

		.pz {
			width: 100%;
			padding: 18rpx 52rpx;
			background-color: #ffffff;
			margin-top: 20rpx;

			.title {
				font-size: 30rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 400;
				color: #333333;
				line-height: 42rpx;
			}
		}

		.addressBox {
			width: 100%;
			height: 358rpx;
			background: #FFFFFF;
			border-radius: 10rpx 10rpx 10rpx 10rpx;
			margin-top: 24rpx;
			padding: 34rpx 30rpx;
			box-sizing: border-box;

			.title {
				font-size: 36rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 400;
				color: #333333;
				line-height: 28rpx;
			}

			.addressmessage {
				font-size: 28rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 400;
				color: #707070;
				line-height: 36rpx;
				margin-top: 38rpx;

				.heng {
					width: 100%;
					height: 1rpx;
					background-color: #D8D8D8;
					margin: 20rpx 0;
				}

				.item {
					display: flex;
				}
			}
		}

		.bottomContent {
			width: 100%;
			background: #FFFFFF;
			position: fixed;
			bottom: 0;
			padding: 36rpx 30rpx;
			box-sizing: border-box;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding-bottom: constant(safe-area-inset-bottom);
			/* 兼容 iOS 设备 */
			padding-bottom: env(safe-area-inset-bottom);

			.btnbox {
				display: flex;
				margin-left: 420rpx;

				.btn {
					width: 240rpx;
					height: 70rpx;
					border-radius: 512rpx 512rpx 512rpx 512rpx;
					opacity: 1;
					border: 2rpx solid #359691;
					font-size: 36rpx;
					font-family: PingFang SC-Bold, PingFang SC;
					font-weight: 400;
					color: #359691;
					line-height: 70rpx;
					text-align: center;
				}

				.btns {
					background-color: #359691;
					color: #ffffff;
					margin-left: 20rpx;
				}
			}
		}
	}
</style>